<template>
  <div>
    <h1>成品球各质量参数对应配料量柱状图</h1>
<!--    <el-form ref="form" :model="ruleForm">-->
<!--      <el-form-item label="请选择成品球的质量参数" prop="roleId">-->
<!--        <el-select v-model="ruleForm.role" clearable placeholder="请选择">-->
<!--          <el-option-->
<!--              v-for="item in userListOptions"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

    <div id="chart_example">

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      ruleForm: {
        role:''
      },
      userListOptions:[
        {
          value: '0',
          label: '次数'
        },
        {
          value: '1',
          label: '粒度'
        },
        {
          value: '2',
          label: '成球率'
        },
        {
          value: '3',
          label: '生球水分'
        },
        {
          value: '4',
          label: '抗压强度/N'
        },
        {
          value: '5',
          label: '落下强度/N'
        }
      ],
    }
  },
  mounted() {
    let this_ = this;
    let myChart = echarts.init(document.getElementById('chart_example'));
    var chartDom = document.getElementById('chart_example');
    var app = {};

    var posList = [
      'left', 'right', 'top', 'bottom',
      'inside',
      'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
      'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    app.configParameters = {
      rotate: {
        min: -90,
        max: 90
      },
      align: {
        options: {
          left: 'left',
          center: 'center',
          right: 'right'
        }
      },
      verticalAlign: {
        options: {
          top: 'top',
          middle: 'middle',
          bottom: 'bottom'
        }
      },
      position: {
        options: posList.reduce(function (map, pos) {
          map[pos] = pos;
          return map;
        }, {})
      },
      distance: {
        min: 0,
        max: 100
      }
    };

    app.config = {
      rotate: 90,
      align: 'left',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 15,
      onChange: function () {
        var labelOption = {
          normal: {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          }
        };
        myChart.setOption({
          series: [{
            label: labelOption
          }, {
            label: labelOption
          }, {
            label: labelOption
          }, {
            label: labelOption
          }]
        });
      }
    };

    var labelOption = {
      show: true,
      position: app.config.position,
      distance: app.config.distance,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      rotate: app.config.rotate,
      formatter: '{c}  {name|{a}}',
      fontSize: 16,
      rich: {
        name: {
        }
      }
    };

    let option = {
      color:['#5571c6','#92cc76','#fac859','#ee6767','#9a3fd7'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['粒度', '成球率', '生球水分', '抗压强度', '落下强度']
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          data: ['0508 18:49', '0508 20:26', '0508 23:01', '0509 01:03', '0509 05:13']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '粒度',
          type: 'bar',
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [13.5, 13.2, 13, 12.9, 12.6]
        },
        {
          name: '成球率',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [64, 67, 65, 68, 70]
        },
        {
          name: '生球水分',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [9.5, 9.6, 9.7, 9.4, 9.8]
        },
        {
          name: '抗压强度',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [12.3, 11.9, 12.1, 12.5, 11.7]
        },
        {
          name: '落下强度',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [3.5, 3.6, 3.7, 3.6, 3.8]
        }
      ]
    };
    myChart.setOption(option);

    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize',function() {myChart.resize()});
  },
  methods: {},
  watch: {},
  created() {

  }
}
</script>

<style>
h1{
  font-family: 思源宋体;
  font-size: 30px;
  font-weight: bold;
}

h2{
  font-size: 23px;
  font-weight: bold;
}

.el-form-item__label{
  font-family: 思源宋体;
  font-size: medium;
  width: max-content;
}
#chart_example{
  width: 70%;
  height: 500px;
}
</style>